<script setup lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue';

import {
  CheckOutlined,
  DeleteOutlined,
  EyeOutlined,
  LoadingOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import { uploadImg } from '#/api';
import { errimage } from '#/base';

// import MoveItem from './moveItem.vue';
import { getResult } from '../../../tools';

const formState: any = defineModel();
const productSpecRule = computed(() => {
  return formState.value.rule?.productSpecRule;
});

let getscoplist = formState.value.specInfo.specValues; // toRef(formState.value.specInfo, 'specValues'); // computed(() => formState.value.specInfo.specValues); // computed(resetFuncs);
let shutOffTime: any = null;

watch(formState, () => {
  getscoplist = formState.value.specInfo.specValues;
});

watch(
  () => formState.value.specInfo.specValues,
  () => {
    // console.log('检查监听');
    // if (shutOffTime) {
    //   clearTimeout(shutOffTime);
    // }
    // shutOffTime = setTimeout(() => {
    //   const state = Date.now();
    //   const list = getscoplist.map((item: any) => item.values);
    //   const resutList = getResult(list);
    //   let poshIndex = -1;
    //   const isDeleteIndexs: number[] = [];
    //   // 删除多余
    //   formState.value.specPricesV2.forEach((item3: any, index: number) => {
    //     const item3Ids = item3.sellProperties
    //       .map((item4: any) => item4.id)
    //       .sort();
    //     const idDeletReut = resutList.find((item5: any) => {
    //       const item5Ids = item5.map((item6: any) => item6.id).sort();
    //       return JSON.stringify(item5Ids) === JSON.stringify(item3Ids);
    //     });
    //     if (!idDeletReut) {
    //       isDeleteIndexs.push(index);
    //     }
    //   });
    //   formState.value.specPricesV2 = formState.value.specPricesV2.filter(
    //     (_item3: any, index: number) => !isDeleteIndexs.includes(index),
    //   );
    //   // 修改和新增
    //   resutList.forEach((item: any) => {
    //     const itemIds = item.map((item2: any) => item2.id).sort();
    //     const toJSONnow = JSON.stringify(itemIds);
    //     const nowIndex = formState.value.specPricesV2.findLastIndex(
    //       (item3: any) => {
    //         const item3Ids = item3.sellProperties
    //           .map((item4: any) => item4.id)
    //           .sort();
    //         return JSON.stringify(item3Ids) === toJSONnow;
    //       },
    //     );
    //     let getIsNowSetData = null;
    //     if (nowIndex !== -1) {
    //       poshIndex = nowIndex;
    //       getIsNowSetData = formState.value.specPricesV2[nowIndex];
    //     }
    //     if (getIsNowSetData) {
    //       // getIsNowSetData.isCheack = true;
    //       getIsNowSetData.sellProperties.forEach((item4: any) => {
    //         item.forEach((item5: any) => {
    //           if (item4.id === item5.id) {
    //             item5.valueName !== item4.valueName &&
    //               (item4.valueName = item5.valueName);
    //             item5.remark !== item4.remark && (item4.remark = item5.remark);
    //           }
    //         });
    //       });
    //     } else {
    //       // console.log('这里要添加', poshIndex);
    //       formState.value.specPricesV2.splice(poshIndex + 1, 0, {
    //         sellProperties: getscoplist.map((item2: any, index: number) => {
    //           return {
    //             propertyName: item2.sellPropertyName,
    //             remark: item[index].remark,
    //             id: item[index].id,
    //             valueName: item[index].valueName,
    //           };
    //         }),
    //         code: '',
    //         price: '',
    //         supplyPrice: '/',
    //         stockNum: 0,
    //         status: true,
    //       });
    //     }
    //   });
    //   const resutListSortList = resutList.map((item9: any) =>
    //     item9.map((item10: any) => item10.id),
    //   );
    //   // console.log('resutListSortList', resutListSortList);
    //   const getNewDatas = JSON.parse(
    //     JSON.stringify(formState.value.specPricesV2),
    //   );
    //   const runfoer = resutListSortList.map((item9: any) => {
    //     // console.log('item9', item9);
    //     const sortitem9 = [...item9].sort();
    //     return getNewDatas.find((item10: any) => {
    //       const item10Ids = item10.sellProperties.map((item11: any) => item11.id);
    //       const sortitem10Ids = [...item10Ids].sort();
    //       if (JSON.stringify(sortitem9) === JSON.stringify(sortitem10Ids)) {
    //         const sortDataInNew = item9.map((item12: any) => {
    //           const findInPeor = item10.sellProperties.find((item13: any) => {
    //             return item13.id === item12;
    //           });
    //           return findInPeor;
    //         });
    //         item10.sellProperties = sortDataInNew;
    //         return true;
    //       }
    //       return false;
    //     });
    //   });
    //   const end = Date.now();
    //   console.log('排序时间', end - state);
    //   console.log('大排序后的结果', runfoer);
    //   formState.value.specPricesV2 = runfoer;
    //   clearTimeout(shutOffTime);
    //   shutOffTime = null;
    // }, 500);

    watctData();
  },
);
onMounted(() => {
  // watctData();
});
function upskuimage(item: any) {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.addEventListener('change', async (e: any) => {
    const file = e.target.files[0];
    if (!file) {
      return;
    }
    // 限制图片为1:1 大小5m
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.addEventListener('load', () => {
      if (img.width !== img.height) {
        message.error('图片必须是1:1比例');
        return;
      }
      if (file.size / 1024 / 1024 > 5) {
        message.error('图片大小不能超过5M');
      }
      const url = URL.createObjectURL(file);
      // console.log('url', url);
      item.lodinskuimage = true;
      const formDatas = new FormData();
      formDatas.append('files', file);
      formDatas.append('shopId', formState.value.shopId);
      formDatas.append('offerId', formState.value.offerId);
      uploadImg(formDatas).then((res: any) => {
        item.lodinskuimage = false;
        item.skuImageUrl = res[0] || url;
      });
    });

    // const formData = new FormData();
    // formData.append('file', file);
    // const { data } = await uploadImage(formData);
  });
  input.click();
}
function watctData() {
  // console.log('运行计算22');
  if (shutOffTime) {
    clearTimeout(shutOffTime);
    shutOffTime = null;
  }
  // return;
  // console.log('运行计算');
  shutOffTime = setTimeout(() => {
    // const state = Date.now();
    const list = getscoplist.map((item: any, index: number) => {
      item.showSwachSkuImage = index === 0;
      item.showSkuImage = index === 0 ? item.showSkuImage : false;
      return item.values;
    });
    const resutList = getResult(list);
    let poshIndex = -1;
    const isDeleteIndexs: number[] = [];
    // 删除多余
    // eslint-disable-next-line unicorn/prefer-structured-clone
    let getNewDatas = JSON.parse(JSON.stringify(formState.value.specPricesV2));
    // console.log('getNewDatas', getNewDatas, resutList);
    // return;
    getNewDatas.forEach((item3: any, index: number) => {
      const item3Ids = item3.sellProperties
        .map((item4: any) => item4.id)
        .sort();
      const idDeletReut = resutList.find((item5: any) => {
        const item5Ids = item5.map((item6: any) => item6.id).sort();
        return JSON.stringify(item5Ids) === JSON.stringify(item3Ids);
      });
      if (!idDeletReut) {
        isDeleteIndexs.push(index);
      }
    });
    getNewDatas = getNewDatas.filter(
      (_item3: any, index: number) => !isDeleteIndexs.includes(index),
    );
    // 修改和新增
    resutList.forEach((item: any) => {
      const itemIds = item.map((item2: any) => item2.id).sort();
      const toJSONnow = JSON.stringify(itemIds);
      const nowIndex = getNewDatas.findLastIndex((item3: any) => {
        const item3Ids = item3.sellProperties
          .map((item4: any) => item4.id)
          .sort();
        return JSON.stringify(item3Ids) === toJSONnow;
      });
      let getIsNowSetData = null;
      if (nowIndex !== -1) {
        poshIndex = nowIndex;
        getIsNowSetData = getNewDatas[nowIndex];
      }
      if (getIsNowSetData) {
        // getIsNowSetData.isCheack = true;
        getIsNowSetData.sellProperties.forEach((item4: any) => {
          item.forEach((item5: any) => {
            if (item4.id === item5.id) {
              item5.valueName !== item4.valueName &&
                (item4.valueName = item5.valueName);
              item5.remark !== item4.remark && (item4.remark = item5.remark);
            }
          });
        });
      } else {
        // console.log('这里要添加', poshIndex);
        getNewDatas.splice(poshIndex + 1, 0, {
          sellProperties: getscoplist.map((item2: any, index: number) => {
            return {
              propertyName: item2.sellPropertyName,
              remark: item[index].remark,
              id: item[index].id,
              valueName: item[index].valueName,
            };
          }),
          code: '',
          price: '',
          supplyPrice: '/',
          stockNum: 0,
          status: true,
        });
      }
    });
    const resutListSortList = resutList.map((item9: any) =>
      item9.map((item10: any) => item10.id),
    );
    const runfoer = resutListSortList.map((item9: any) => {
      const sortitem9 = [...item9].sort();
      return getNewDatas.find((item10: any) => {
        const item10Ids = item10.sellProperties.map((item11: any) => item11.id);
        const sortitem10Ids = [...item10Ids].sort();
        if (JSON.stringify(sortitem9) === JSON.stringify(sortitem10Ids)) {
          const sortDataInNew = item9.map((item12: any) => {
            const findInPeor = item10.sellProperties.find((item13: any) => {
              return item13.id === item12;
            });
            return findInPeor;
          });
          item10.sellProperties = sortDataInNew;
          return true;
        }
        return false;
      });
    });
    formState.value.specPricesV2 = runfoer;
    // const end = Date.now();
    // console.log('排序时间', end - state);
    clearTimeout(shutOffTime);
    shutOffTime = null;
  }, 500);
}
// function cartesianProduct(resultArr: any, arr: any) {
//   const result: any = [];
//   resultArr.forEach((loop1: any) => {
//     arr.forEach((loop2: any) => {
//       result.push([...loop1, loop2]);
//     });
//   });
//   return result;
// }
// function getResult(list: any) {
//   if (list.length < 2) {
//     return list[0]?.map((l: any) => [l]) || [];
//   }
//   let result = list[0].map((l: any) => [l]);
//   list.forEach((l: any, i: number) => {
//     if (i) {
//       result = cartesianProduct(result, l);
//     }
//   });
//   return result;
// }

const inputRef = ref();
const name = ref();
const selectRef = ref();

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return this.vnodes;
  },
});

function removeValues(item: any, index: number) {
  item.values.splice(index, 1);
}
function addValues(item: any) {
  item.values.push({
    valueId: '',
    valueName: '',
    help: null,
    validateStatus: null,
    remark: '',
    id: Math.random().toString(36).slice(2, 32),
  });
}

function addProperty() {
  // console.log('getscoplist', getscoplist);
  // console.log('productSpecRule', productSpecRule);

  // 打开选择框
  const item = {
    id: Math.random().toString(36).slice(2, 32),
    sellPropertyName: '',
    isRequired: false,
    supportDiy: true,
    supportRemark: false,
    valueDisplayStyle: 'text',
    values: [
      {
        valueId: '',
        valueName: '',
        help: null,
        validateStatus: null,
        remark: '',
        id: Math.random().toString(36).slice(2, 32),
      },
    ],
  };
  formState.value.specPricesV2.forEach((item2: any) => {
    item2.sellProperties.push(item.values[0]);
  });
  getscoplist.push(item);
}
function deleteItem(index: number) {
  getscoplist[index].values.forEach((item: any) => {
    formState.value.specPricesV2.forEach((item2: any) => {
      const getIndex = item2.sellProperties.findIndex(
        (item3: any) => item3.id === item.id,
      );
      if (getIndex !== -1) {
        item2.sellProperties.splice(getIndex, 1);
      }
    });
  });
  getscoplist.splice(index, 1);
}

// function getData() {
//   // console.log('productSpecRule', productSpecRule, getscoplist);
//   // console.log('sku列表', formState.value.specPricesV2);
// }
function onChangeSeletGuige(e: string, item: any) {
  const selectItem = productSpecRule.value.requiredSpecDetails.find(
    (item: any) => item.sellPropertyName === e,
  );
  if (selectItem) {
    selectItem.iserror = false;
    selectItem.errtext = null;
    selectItem.values = item.values;
    item.propertyName = selectItem.sellPropertyName;
    Object.assign(item, selectItem);
    // console.log('item', item);
  }
}
const visible = ref(false);
const showImages = ref('');
const setVisible = (value: any, url: string): void => {
  visible.value = value;
  showImages.value = url;
};
</script>

<template>
  <!-- <DndProvider :backend="HTML5Backend"> -->
  <div>
    <a-button
      :disabled="
        getscoplist.length >= productSpecRule.maxSpecNumLimit ||
        (getscoplist.length >= productSpecRule.requiredSpecDetails.length &&
          !productSpecRule.supportPropertyDiy)
      "
      type="primary"
      @click="addProperty"
    >
      添加规格({{ getscoplist.length }}/{{ productSpecRule.maxSpecNumLimit }})
    </a-button>
    <div
      v-for="(item, index) in getscoplist"
      :key="item.id"
      :class="{ 'border-rose-500': item.iserror }"
      class="my-2 overflow-hidden rounded-lg border bg-gray-100 p-2"
    >
      <a-form-item
        :help="item.errtext || null"
        :label-col="{ span: 24, offset: 24 }"
        :rules="[
          { required: !!item.isRequired, message: `该项为必填，请输入` },
        ]"
        :validate-status="item.iserror ? 'error' : null"
        class="w-full"
      >
        <template #label>
          <div class="flex w-full items-center justify-between">
            <div
              v-if="item.isRequired"
              class="pointer-events-none"
              style="line-height: 31px"
            >
              {{ item.sellPropertyName }}
            </div>
            <!-- <a-button @click="getData">读取数据</a-button> -->
            <div v-if="!item.isRequired">
              <a-select
                v-model:value="item.sellPropertyName"
                :field-names="{
                  label: 'sellPropertyName',
                  value: 'sellPropertyName',
                }"
                :options="
                  (() => {
                    return productSpecRule.requiredSpecDetails.map(
                      (itemer: any) => {
                        itemer.disabled = false;
                        const findItem = getscoplist.find((getName: any) => {
                          return (
                            getName.sellPropertyName === itemer.sellPropertyName
                          );
                        });
                        if (findItem) {
                          itemer.disabled = true;
                        } else {
                          itemer.disabled = false;
                        }
                        return itemer;
                      },
                    );
                  })()
                "
                style="width: 160px"
                @change="(e: string) => onChangeSeletGuige(e, item)"
              >
                <template
                  v-if="productSpecRule.supportPropertyDiy"
                  #dropdownRender="{ menuNode: menu }"
                >
                  <VNodes :vnodes="menu" />
                  <a-divider style="margin: 4px 0" />
                  <a-space style="padding: 4px 8px">
                    <a-input
                      ref="inputRef"
                      v-model:value="name"
                      placeholder="请输入规格名"
                      size="small"
                    />
                    <a-button
                      type="link"
                      @click="
                        (e: any) => {
                          e.preventDefault();
                          if (!item.supportDiy) return;
                          if (name.trim() === '') {
                            message.error('请输入规格名');
                            return;
                          }
                          const getItemIs =
                            productSpecRule.requiredSpecDetails.find(
                              (iouter: any) => {
                                return iouter.sellPropertyName === name.trim();
                              },
                            );

                          if (getItemIs) {
                            if (!getItemIs.disabled) {
                              item.sellPropertyName = name.trim();
                              name = '';
                            } else {
                              message.error('该规格名已存在');
                              return;
                            }
                            return;
                          }
                          productSpecRule.requiredSpecDetails.push({
                            sellPropertyName: name.trim(),
                            sellPropertyId: '',
                            disabled: false,
                          });
                          item.sellPropertyName = name.trim();
                          name = '';
                        }
                      "
                    >
                      <template #icon>
                        <CheckOutlined />
                      </template>
                    </a-button>
                  </a-space>
                </template>
              </a-select>
            </div>
            <div
              v-if="productSpecRule.supportPropertySequenceVariable"
              class="ml-4"
            >
              <button :disabled="true"></button>
              <a-button
                :disabled="index === 0"
                type="link"
                @click="
                  () => {
                    if (index === 0) return;
                    const item1 = getscoplist[index];
                    getscoplist.splice(index, 1);
                    getscoplist.splice(index - 1, 0, item1);
                  }
                "
              >
                上移
              </a-button>

              <a-button
                :disabled="getscoplist.length === index + 1"
                type="link"
                @click="
                  () => {
                    if (getscoplist.length === index + 1) return;
                    const item1 = getscoplist[index];
                    getscoplist.splice(index, 1);
                    getscoplist.splice(index + 1, 0, item1);
                  }
                "
              >
                下移
              </a-button>
            </div>
            <a-button
              :disabled="item.isRequired || getscoplist.length <= 1"
              type="link"
              @click="deleteItem(index)"
            >
              删除
            </a-button>
            <a-popover title="从其他规格导入" trigger="click">
              <template #content>
                <div>
                  <span class="vertical-sub text-red-500"> * </span>
                  <span class="text-xs text-red-400">
                    注意： 从对应规格导入后将会删除被使用导入的规格，以适配价格
                  </span>
                </div>
                <div
                  v-for="(item1, index1) in getscoplist"
                  :key="item1.id"
                  class="mb-2"
                >
                  <a-button
                    v-if="item1.sellPropertyName !== item.sellPropertyName"
                    type="link"
                    @click="
                      () => {
                        console.log('item', item);
                        console.log(item1);
                        console.log(
                          'formState.value.specPricesV2',
                          formState.specPricesV2,
                        );
                        formState.specPricesV2.forEach((item2: any) => {
                          // item2.sellProperties.forEach((item3: any) => {

                          // });
                          item.values.forEach((item4: any) => {
                            console.log('item4', item4.id);
                            const findIndex = item2.sellProperties.findIndex(
                              (item3: any) => {
                                return item3.id === item4.id;
                              },
                            );
                            item2.sellProperties.splice(findIndex, 1);
                            console.log('需要删除的id', findIndex);
                          });
                        });
                        item.values = item1.values;
                        getscoplist.splice(index1, 1);
                      }
                    "
                  >
                    {{ item1.sellPropertyName }}
                  </a-button>
                </div>
              </template>
              <a-button type="primary"> 从其他规格导入 </a-button>
            </a-popover>

            <a-switch
              v-if="index === 0"
              v-model:checked="item.showSkuImage"
              class="ml-2"
            >
              添加规格图片
            </a-switch>
          </div>
        </template>
        <div>
          <div>规格值({{ index + 1 }})</div>
          <a-space align="end" wrap>
            <div v-for="(item1, index1) in item.values" :key="index1">
              <a-form-item
                :help="item1.help"
                :validate-status="item1.validateStatus"
              >
                <a-space :size="2" direction="vertical">
                  <a-space :size="1">
                    <a-select
                      v-if="
                        item.valueDisplayStyle === 'cascader_multi_select' ||
                        item.valueDisplayStyle === 'select'
                      "
                      ref="selectRef"
                      v-model:value="item1.valueId"
                      :field-names="{
                        label: 'sellPropertyValueName',
                        value: 'sellPropertyValueId',
                      }"
                      :filter-option="
                        (input: string, option: any) => {
                          console.log('option', option);
                          return (
                            option.sellPropertyValueName
                              .toLowerCase()
                              .indexOf(input.toLowerCase()) >= 0
                          );
                        }
                      "
                      :options="item.propertyValues"
                      show-search
                      style="width: 170px"
                      @change="
                        (data: any, q: any) => {
                          // 检查是不是重复了

                          if (
                            item.values.filter(
                              (item2: any) => item2.valueId === data,
                            ).length > 1
                          ) {
                            item1.validateStatus = 'error';
                            item1.help = '规格值不能重复';
                          } else {
                            item1.validateStatus = '';
                            item1.help = '';
                            item1.valueName = q.sellPropertyValueName;
                          }
                        }
                      "
                    >
                      <template #option="item2">
                        <a-space>
                          <div
                            v-if="
                              item2.valuePic && item2.valuePic.picType === 'rgb'
                            "
                            :style="`background-color:${item2.valuePic.picValue}`"
                            class="h-4 w-4 rounded"
                          ></div>
                          <div
                            v-if="
                              item2.valuePic && item2.valuePic.picType === 'url'
                            "
                            class="h-4 w-4 rounded"
                          >
                            <img
                              :src="item2.valuePic.picValue"
                              alt=""
                              class="h-full w-full rounded"
                            />
                          </div>
                          <div class="text-xs">
                            {{ item2.sellPropertyValueName }}
                          </div>
                        </a-space>
                      </template>
                      <template
                        v-if="item.supportDiy"
                        #dropdownRender="{ menuNode: menu }"
                      >
                        <VNodes :vnodes="menu" />
                        <a-divider style="margin: 4px 0" />
                        <a-space style="padding: 4px 8px">
                          <a-input
                            ref="inputRef"
                            v-model:value="name"
                            placeholder="请输入规格值"
                            size="small"
                          />
                          <a-button
                            type="link"
                            @click="
                              (e: any) => {
                                e.preventDefault();
                                if (!item.supportDiy) return;
                                if (name.trim() === '') {
                                  message.error('请输入规格值');
                                  return;
                                }
                                const getItemr = item.propertyValues.find(
                                  (item1: any) => {
                                    return (
                                      item1.sellPropertyValueName ===
                                      name.trim()
                                    );
                                  },
                                );
                                if (getItemr) {
                                  item1.valueId = getItemr.sellPropertyValueId;
                                  item1.valueName =
                                    getItemr.sellPropertyValueName;
                                  name = '';
                                  // setOuet();
                                  if (
                                    item.values.filter(
                                      (item2: any) =>
                                        item2.valueId === item1.valueId,
                                    ).length > 1
                                  ) {
                                    item1.validateStatus = 'error';
                                    item1.help = '规格值不能重复';
                                  } else {
                                    item1.validateStatus = '';
                                    item1.help = '';
                                  }
                                  return;
                                }
                                item.propertyValues.push({
                                  sellPropertyValueName: name,
                                  sellPropertyValueId: name,
                                });

                                item1.valueId = name;
                                item1.valueName = name;
                                name = '';
                                // setOuet();
                              }
                            "
                          >
                            <template #icon>
                              <CheckOutlined />
                            </template>
                          </a-button>
                        </a-space>
                      </template>
                    </a-select>

                    <a-input
                      v-if="item.valueDisplayStyle === 'text'"
                      v-model:value="item1.valueName"
                      style="width: 170px"
                    />

                    <a-popover
                      :open="item1.showPopover"
                      placement="bottom"
                      trigger="click"
                    >
                      <template #content>
                        <a-space direction="vertical">
                          <a-select
                            v-if="item1.measureTemplates.length > 1"
                            v-model:value="item1.selectmeasureitem"
                            :field-names="{
                              label: 'displayName',
                              value: 'templateId',
                            }"
                            :options="item1.measureTemplates"
                            style="width: 200px"
                          />

                          <!-- <a-input-group compact> -->
                          <div
                            class="overflow-x-scroll pb-4"
                            style="max-width: 1200px"
                          >
                            <a-space>
                              <template
                                v-for="(item3, _index3) in item1
                                  .measureTemplates?.length === 1
                                  ? item1.measureTemplates?.[0]?.valueModules ||
                                    []
                                  : item1.measureTemplates?.find(
                                      (iter: any) =>
                                        iter.templateId ===
                                        item1.selectmeasureitem,
                                    )?.valueModules || []"
                                :key="_index3"
                              >
                                {{ item3.prefix }}
                                <a-input-group class="text-nowrap" compact>
                                  <a-input
                                    v-if="item3.inputType === 'input'"
                                    v-model:value="item3.value"
                                    :max="item3.validateRule.max"
                                    :min="item3.validateRule.min"
                                    placeholder="请输入"
                                    style="width: 80px"
                                  />
                                  <a-select
                                    v-if="item3.units.length > 0"
                                    v-model:value="item3.selectValue"
                                    :field-names="{
                                      label: 'unitName',
                                      value: 'unitId',
                                    }"
                                    :options="item3.units"
                                    placeholder="请输入"
                                    style="width: 70px"
                                  />
                                </a-input-group>
                                {{ item3.suffix }}
                              </template>
                            </a-space>
                          </div>
                          <div class="mt-4 text-xs">
                            输入品类描述、单件净重和件数信息，如
                            <span
                              v-for="(item33, _index33) in item.measureTemplates
                                ?.length === 1
                                ? item.measureTemplates?.[0]?.valueModules || []
                                : item.measureTemplates?.find(
                                    (iter: any) =>
                                      iter.templateId ===
                                      item1.selectmeasureitem,
                                  )?.valueModules || []"
                              :key="_index33"
                            >
                              {{ item33.prefix }}
                              [{{
                                item33.validateRule.dataType === 'string'
                                  ? `备注${_index33 + 1}：如'香辣/ 甜辣 / 七分甜'`
                                  : item33.validateRule.dataType === 'float'
                                    ? `10/${item33.units[0]?.unitName || ''}`
                                    : item33.validateRule.dataType === 'integer'
                                      ? `5/${item33.units[0]?.unitName || ''}`
                                      : ''
                              }}]
                              {{ item33.suffix }}
                            </span>
                          </div>
                          <div class="flex w-full justify-end">
                            <a-button
                              class="mr-4"
                              @click="() => (item1.showPopover = false)"
                            >
                              取消
                            </a-button>
                            <a-button
                              type="primary"
                              @click="
                                () => {
                                  const getValue =
                                    item1.measureTemplates?.length === 1
                                      ? item1.measureTemplates?.[0]
                                          ?.valueModules || []
                                      : item1.measureTemplates?.find(
                                          (iter: any) =>
                                            iter.templateId ===
                                            item1.selectmeasureitem,
                                        )?.valueModules || [];
                                  // console.log('12465', getValue);
                                  let teste = ``;
                                  getValue.forEach((iter: any) => {
                                    if (iter.value) {
                                      teste += `${iter.value}`;
                                    }
                                    if (iter.selectValue) {
                                      iter.units.find((item2: any) => {
                                        if (item2.unitId === iter.selectValue) {
                                          teste += `${item2.unitName}`;
                                        }
                                      });
                                    }
                                    teste += `${iter.suffix}`;
                                  });
                                  console.log('testeteste', teste);
                                  item1.valueName = teste;
                                  item1.showPopover = false;
                                }
                              "
                            >
                              确定
                            </a-button>
                          </div>
                        </a-space>
                        <!-- </a-input-group> -->
                      </template>
                      <a-input
                        v-if="item.valueDisplayStyle === 'measure'"
                        v-model:value="item1.valueName"
                        style="width: 170px"
                        @click="item1.showPopover = true"
                      />
                    </a-popover>

                    <!-- <a-select
                        v-if="item.valueDisplayStyle === 'measure'"
                        :field-names="{
                          label: 'unitName',
                          value: 'unitId',
                        }"
                        :options="
                          item.measureTemplates[0].valueModules[0].units
                            .length > 0
                            ? item.measureTemplates[0].valueModules[0].units
                            : item.measureTemplates[0].valueModules[1].units
                        "
                        style="width: 100px"
                      /> -->
                    <a-input
                      v-if="item.supportRemark"
                      v-model:value="item1.remark"
                      :maxlength="18"
                      placeholder="请输入备注"
                      style="width: 100px"
                    />
                    <!-- </a-input-group> -->
                    <div
                      v-if="item.showSwachSkuImage && item.showSkuImage"
                      class="ml-2"
                    >
                      <a-popover v-if="item1.skuImageUrl">
                        <template #content>
                          <a-space>
                            <a-button
                              type="link"
                              @click="() => (item1.skuImageUrl = '')"
                            >
                              <template #icon>
                                <DeleteOutlined />
                              </template>
                            </a-button>
                            <a-button
                              type="link"
                              @click="() => setVisible(true, item1.skuImageUrl)"
                            >
                              <template #icon>
                                <EyeOutlined />
                              </template>
                            </a-button>
                          </a-space>
                        </template>
                        <img
                          :src="item1.skuImageUrl"
                          alt=""
                          class="h-10 w-10 rounded-sm"
                        />
                      </a-popover>

                      <div v-else>
                        <div
                          class="flex h-10 w-10 cursor-pointer items-center justify-center rounded-sm border"
                          @click="upskuimage(item1)"
                        >
                          <LoadingOutlined v-if="item1.lodinskuimage" />

                          <PlusOutlined v-else />
                        </div>
                      </div>
                    </div>
                    <a-button type="link" @click="removeValues(item, index1)">
                      <template #icon>
                        <DeleteOutlined />
                      </template>
                    </a-button>
                  </a-space>

                  <div v-if="item1.in1688Name">
                    来源值：{{ item1.in1688Name }}
                  </div>
                </a-space>
              </a-form-item>
            </div>
            <a-form-item>
              <a-button
                :disabled="
                  item.values.length >= productSpecRule.specSingleLimit
                "
                type="primary"
                @click="addValues(item)"
              >
                新增
              </a-button>
            </a-form-item>
          </a-space>
        </div>
      </a-form-item>
      <!-- </MoveItem> -->
    </div>
    <a-image
      v-if="visible"
      :fallback="errimage"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      :src="showImages"
      :style="{ display: 'none' }"
      :width="200"
    />
  </div>
  <!-- </DndProvider> -->
</template>
